<template>
  <div id="app">
      <main>
        <component :is="nowPage"></component>
      </main>
      <footer>
        <Footer @tab='tab'/>
      </footer>
  </div>
</template>

<script>
// 引入
import Car from '@/views/car'
import Home from '@/views/home'
import List from '@/views/list'
import My from '@/views/my'
import Footer from '@/components/Footer.vue'
export default {
  data(){
    return{
      nowPage:"home",
      pageList:['home','list','car','my'],
    }
  },
  methods:{
    tab(index){
      this.nowPage = this.pageList[index]
    }
  },
  components:{
    Footer,
    My,
    List,
    Home,
    Car,
}

}
</script>

<style lang="less">
#app{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
   main{
      width: 100%;
      flex: 1;
    }
    footer{
      height: 100px;
    }
}
   
  
</style>